<template>
	<view class="">
		<headerinfo></headerinfo>
		<view class="width60">
			<u-navbar title="祭奠列表"  leftIconColor="#fff" :autoBack="true" :bgColor="bgColor"
				:titleStyle="titleStyle"></u-navbar>
				<view class="searchPage">
					
				
					<view class="guanlist">
						<view class="list" v-for="(item,index) in list" :key="index">
							<view class="label">
								{{item.name}}
							</view>
							<view class="flexbox">
								<view class="li" @click="checksmall(item2)" v-for="(item2,idnex2) in item.children" :key="idnex2">
									<view class="name">
										{{item2.assetName}}
									</view>
									<image :src="item2.assetPicUrl" mode="heightFix"></image>
									<span class="num">{{item2.timeunitPrice}}币</span>
								</view>
								
								<view class="li" style="height: 0;"></view>
								<view class="li" style="height: 0;"></view>
								<view class="li" style="height: 0;"></view>
								<view class="li" style="height: 0;"></view>
							</view>
							<view class="zhuzi" v-if="index!=list.length-1">
								<image src="https://jn.huaien.com/static/img/gan.png" mode="aspectFill" style="height: 4px;width: 100%;"></image>
							</view>
						</view>
				
					</view>
					<view style="height: 120rpx;"></view>
					<view class="lasttab">
						<span class="tabins" @click="changeTabbar(item,index)" :class="index == tabIndex?'active':''" v-for="(item,index) in tablist" :key="index">
						<image v-if="index == 0" src="https://cdn-oss.familylove.online/user/kmh/image/24884183jd1.png" mode="heightFix"></image>
						<image v-if="index == 1" src="https://cdn-oss.familylove.online/user/kmh/image/24884183jd11.png" mode="heightFix"></image>
						<image v-if="index == 2" src="https://cdn-oss.familylove.online/user/kmh/image/24884183jd111.png" mode="heightFix"></image>
						<image v-if="index == 3" src="https://cdn-oss.familylove.online/user/kmh/image/24884183jd1111.png" mode="heightFix"></image>
							<span>{{item}}</span>
						 </span>
					</view>
				
				
					
				</view>
		</view>
		<u-popup :show="show" mode="center"  @close="show = false">
			<view class="diacheck">
				<image :src="checkData.assetPicUrl" mode="widthFix"></image>
				<view class="name">
					{{checkData.assetName}}
				</view>
				<view class="price">
					{{checkData.timeunitPrice}}(纪念币)
				</view>
				<view class="time">
					时间：<span>{{checkData.timeunitInitCount}}</span>{{checkData.assetTimeunit == 'day'?'天':checkData.assetTimeunit == 'month'?'月':checkData.assetTimeunit == 'single'?'季':'年'}}
				</view>
				<view class="num">
					<span>数量：</span>
					<u-number-box v-model="assetCount" :min="checkData.timeunitInitCount"></u-number-box>
				</view>
				<view class="time">
					总价：<span>{{assetCount*checkData.timeunitPrice}}</span>纪念币
				</view>
				
				<span class="btn" @click="submit">祭奠</span>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show: false,
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				list: [],
				tablist: [],
				checkData:{},
				assetCount:1,
				hallId:'',
				type:'',
				tabIndex:0
			};
		},
		onLoad(e) {
			this.type = e.type
			this.hallId = e.hallId
			this.getData()
		},
		methods: {
			changeTabbar(item,index){
				this.tabIndex = index
				this.getlist(item)
			},
			submit(){
				console.log(this.checkData.assetSubtype)
				
				if(this.checkData.assetSubtype == '鞠躬'){
					uni.$emit('checkjugong', this.checkData)
					uni.navigateBack({
						delta: 1
					})
				}else{
					var Halldata = {
						assetCount:this.assetCount,
						...this.checkData,
						assetId:this.checkData.docId,
						hallId:this.hallId,
						totalPrice:this.assetCount*this.checkData.timeunitPrice,
						timeunitCount:this.assetCount,
						timeunitPrice:this.checkData.timeunitPrice
					}
					this.$api.checkHallMaxAssetCount(Halldata).then(res => {
						this.$api.hallattachAssetToHall(Halldata).then(res=>{
							this.show = false
							uni.navigateBack()
						})
						// let totalFee = 0.01
						// let description = `购买-${this.checkData.assetName}`
						// let app = this
						// wx.login({
						// 	success:(res)=> {
						// 		if (res.code) {
						// 			let data = {
						// 				code: res.code,
						// 				description: description,
						// 				totalFee: totalFee,
						// 			}
						// 			app.$api.wxMiniPayGet(data).then(params => {
						// 				console.log(params)
						// 				wx.requestPayment({
						// 					timeStamp: params.timeStamp + '',
						// 					nonceStr: params.nonceStr,
						// 					package: 'prepay_id=' + params.prepay_id,
						// 					signType: params.signType,
						// 					paySign: params.paySign,
						// 					success:(res)=> {
												
						// 					},
						// 					fail(res) {
						// 						app.$Show.show('支付失败')
											
						// 					}
						// 				})
						// 			})
						// 		}
						// 	}
						// })
					})
					
					
					
				}
				
				
				
				
				
			},
			checksmall(item) {
				console.log(item)
				this.show = true
				this.buyNumber = item.timeunitInitCount
				this.checkData = item
			},
			getlist(assetType) {
				let form = {
					assetType
				}
				this.list = []
				this.$api.assetqueryAssetByType(form).then(res => {
					if(res){
						this.list = this.convertData(res);
						console.log(this.list)
					}
				})
			},
			convertData(rawData) {
				return Object.keys(rawData).map(key => ({
					name: key,
					children: rawData[key] // 直接使用原始数据中的数组
				}));
			},
			getData() {
				this.$api.getAssetTypeConfig().then(res => {
					let arr = []
					for (let key in res) {
						arr.push(key)
					}
					this.tablist = arr
					if(this.type == 1){
						this.tablist.forEach((item,index)=>{
							if(item == '长明灯'){
								this.getlist(this.tablist[index])
							}
						})
					}else{
						this.getlist(this.tablist[0])
					}
				})
			},
			check(item) {
				uni.$emit('checkdating', item)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	};
</script>



<style lang="scss" scoped>
	.diacheck {
		width: 550rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 20rpx;
		padding-bottom: 60rpx;
		image{
			width: 200rpx;
			height: auto;
			margin: 20rpx 0;
		}
		.name{
			margin: 15rpx 0;
			color: #fd6801;
		}
		.price{
			color: #ffaa7f;
		}
		
		.time{
			margin: 20rpx 0;
			span{
				color: #fd6801;
			}
		}
		.num{
			display: flex;
			align-items: center;
				
		}
		
		.btn{
			width: 230rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f60;
			color: #fff;
			margin: 30rpx auto;
			border-radius: 20rpx;
		}
		
	}

	.searchPage {
		height: 100vh;
		background-image: url('https://cdn-oss.familylove.online/user/kmh/image/door.jpg');
		background-size: 100% 100%;
		overflow-y: scroll;
	}

	.guanlist {

		.list {
			width: 100%;
			.zhuzi{
				width: 100%;
				height: 6rpx;
				image{
					height: 10rpx;
					width: 100%;
				}
			}
			
			.num{
				color: #3e0604;
				    font-size: 10px;
				    border-radius: 10px;
				    background-color: #965317;
				    box-shadow: 2px 1px 3px #965317;
					padding: 5rpx 24rpx;
			}

			.flexbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
			}

			.label {
				text-align: center;
				    margin: 30rpx auto;
				    color: #fff;
				    background-image: url(https://jn.huaien.com/static/img/material_title.png);
				    width: 200rpx;
				    background-size: 100% 100%;
				    height: 70rpx;
				    font-size: 30rpx;
				    line-height: 47rpx;
			}

			.li {
				width: 25%;
				margin-top: 20rpx;
				color: #fff;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				image {
					width: auto;
					margin: 20rpx 0;
					height: 120rpx;
				}

			}
		}
		
		.list:first-child{
			padding-top: 0;
		}


	}

	.create {
		width: 600rpx;
		height: 80rpx;
		background: #de4849;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx auto;
		border-radius: 20rpx;
	}


	.lasttab {
		width: 60%;
		position: fixed;
		bottom: 0;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		
		background-color: #bb7000;
		color: #fff;
		.tabins{
			width: 25%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			justify-content: center;
			flex-direction: column;
			image{
				height: 50rpx;
				margin-bottom: 10rpx;
				width:auto;
			}
		}
  
		
		.active{
			background-color: #f19409;
		}
	}
	
	
	.searchPage {
		width: 100%;
		background-size: 100%;
		background-color: #fff;
		margin: 0 auto;
		box-shadow: 0 0 3px #ccc;
	}
	

</style>